<template>
	<view class="g-h5 content body-content">
		<u-navbar back-text="返回" title="阅读"></u-navbar>
		<view class="read-content">
			<view class="read-title">{{nowLog.title}}</view>
			<scroll-view scroll-y class="page-scroll-view" :scroll-top="scrollTop">
				<view v-if="isBuy == 2 && catalog > 3">
					<view class="buy-view">
						<view class="buy-tips-text">
							试读已结束,购买后可继续阅读!
						</view>
						<view class="fee-view" @tap.stop="buyBooks">
							<view class="fee-text">1299阅饼</view>
							<view class="fee-line"></view>
							<view class="buy-btn">购买</view>
						</view>
					</view>
				</view>
				<view v-else>
					<!-- <view id="content-text">
						眼前死的这一个是宋昭仪，与田七只有半个月的主仆情分。半个月前，田七花了大力气，又是托人又是使钱，来到宋昭仪身边伺候。
					</view>
					<view v-for="item in 30" :key="item">
						眼前死的这一个是宋昭仪，与田七只有半个月的主仆情分。半个月前，田七花了大力气，又是托人又是使钱，来到宋昭仪身边伺候。{{item}}
					</view> -->
					<view id='parse'>
						<u-parse :html="nowLog.content"></u-parse>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="read-page-view">
			<view :class="showCatalog ? 'catalog-view catalog-view-sel' : 'catalog-view'"
				@tap.stop="showCatalog = !showCatalog">
				<view><u-icon name="list-dot" color="#DB4E44" size="48"></u-icon></view>
				<view>目录</view>
			</view>
			<scroll-view scroll-y class="catalog-info-view" v-if="showCatalog" show-scrollbar>
				<view class="catalog-info-view1">
					<view class="catalog-text" v-for="(item,index) in logList" :key="index"
						@tap.stop="changeCatalog(index)">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="btns-view">
			<view class="chat_btn" @tap.stop="showChatView">
				<view><u-icon name="chat" size="30" color="#fff"></u-icon></view>
			</view>
			<view class="top-btn" title="上一章" @tap.stop="catalog > 0 ? changeCatalog(catalog - 1) : ''">
				<view><u-icon name="arrow-up-fill" size="30" color="#fff"></u-icon></view>
			</view>
			<view class="bottom-btn" title="下一章" @tap.stop="catalog < 40 ? changeCatalog(catalog + 1) : ''">
				<view><u-icon name="arrow-down-fill" size="30" color="#fff"></u-icon></view>
			</view>
		</view>
		<view class="zhezhao" v-if="showChat" @tap.stop="closeZhezhao">
			<view class="ai-chat-view" style="position: absolute;z-index: 99999;bottom: 0;" v-show="showGptChat" @tap.stop>
				<view v-if="!login"
					style="width: 750rpx;height: 600rpx;background-color: #fff;padding-top: 100rpx;">
					<view class="iframe-view">登录后即可chat</view>
					<view class="login-view">
						<view class="login-view1" @tap.stop="goLogin">点击登录</view>
					</view>
				</view>
				<iframe v-else id="myFrame" src="http://chat.shyf.cc/#/chat/1003" frameborder="0" scrolling='no'
					width="375" height="300"></iframe>
			</view>
		
			<view class="question-view" style="position: absolute;z-index: 99999;bottom: 0;" v-if="showTranView && question_title" @tap.stop>
				<view>{{question_title}}：{{question_text}}</view>
				<view class="">结果：{{result_text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import EasyMarker from 'easy-marker'
	export default {
		data() {
			// 1 已买  2 未买
			return {
				isBuy: 2,
				showCatalog: false,
				catalog: 0,
				scrollTop: -100,
				login: false,
				logList: [],
				nowLog: {},
				showZhezhao: false,
				question_title: '',
				question_text: '',
				result_text: '',
				showChat: false,
				showGptChat: false,
				showTranView: false
			}
		},
		onLoad(options) {
			this.isBuy = options.isbuy || 2
			this.logList = this.$api.blt_list()
			console.log(this.logList)
			this.nowLog = this.logList[0] || {}
			this.isBuy = options.isbuy || 2
			this.logList = this.$api.blt_list()
			this.nowLog = this.logList[0]
			const em = new EasyMarker({
				// regions: texts,
				menuTopOffset: '120px',
				scrollSpeedLevel: 6,
				scrollOffsetBottom: '1.5rem',
				mask: { color: '#407ff2', },
				menuStyle: {
					menu: {},
					item: {
						fontSize: '15px',
						padding: '0px 10px',
						lineHeight: '30px',
					},
					triangle: {},
				},
				menuItems: [
					{
						text: '加入收藏',
						type: 'select',
						iconName: 'iconfont mark',
						id: '302',
			   },
					{
						text: 'aichat',
						type: 'chat',
						iconName: 'iconfont mark',
						id: '303',
			   },
					{
						text: '翻译',
						type: 'tran',
						iconName: 'iconfont mark',
						id: '304',
			   },
					{
						text: '总结',
						type: 'gpt',
						iconName: 'iconfont mark',
						id: '305',
			   },
			  ],
			})

			em.onMenuClick((id, data) => {
				this.showChat = true
				this.showGptChat = true
				this.showTranView = false
				if (id == 302) {
					this.$api.note_create({
						image: 'https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg',
						content: data.anchorNode.data,
						tips: '',
						status: 1,
						label: [],
						name: '理想国（汉译世界学术名著丛书）',
						time: new Date().getTime()
					})
					uni.showToast({ title: '加入成功' })
				}
				if (id == 303) {
					this.showChat = true
					this.showGptChat = true
					this.showTranView = false
					setTimeout(()=>{
						var iframe = document.getElementById('myFrame')
						iframe.contentWindow.postMessage({ 'key': '9527', 'msg': data.anchorNode.data }, '*')
					},500)
				}
				if (id == 304) {
					this.question_title = '翻译'
					this.question_text = data.anchorNode.data
					this.result_text = '正在翻译~~~'
					this.showChat = true
					this.showGptChat = false
					this.showTranView = true
					uni.request({
						url:'http://demo.shyf.cc/api.php/api/demo/tran',
						method:'POST',
						data: { msg: data.anchorNode.data },
						complete: res=> {
							this.result_text = res.data.data.message
						}
					})
				}
				if (id == 305) {
					this.question_title = '总结'
					this.question_text = data.anchorNode.data
					this.result_text = '正在总结~~~'
					this.showChat = true
					this.showGptChat = false
					this.showTranView = true
					uni.request({
						url:'http://demo.shyf.cc/api.php/api/demo/gpt',
						method:'POST',
						data: { msg: data.anchorNode.data },
						complete: res=> {
							this.result_text = res.data.data.message
						}
					})
				}
			})

			setTimeout(() => {
				em.create(document.querySelector('#parse'))
			}, 500)
		},
		onShow() {
			if (uni.getStorageSync('phone')) {
				this.login = true
			} else {
				this.login = false
			}
		},
		methods: {
			changeCatalog(index) {
				this.nowLog = this.logList[index]
				this.catalog = index
				this.scrollTop = 0
				this.showCatalog = false
				setTimeout(() => {
					this.scrollTop = -100
				}, 100)
			},
			closeZhezhao(){
				this.showGptChat = false
				this.showTranView = false
				this.showChat = false
			},
			showChatView(){
				this.showChat = true
				this.showGptChat = true
				this.showTranView = false
			},
			buyBooks() {
				if (this.login) {
					uni.showModal({
						content: '请确认支付',
						success: res => {
							if (res.confirm) {
								uni.showToast({ title: '购买成功' })
								this.isBuy = 1
								this.$api.bookshelf_create({
									'title': '理想国（汉译世界学术名著丛书）',
									'author': '柏拉图',
									'cover': 'https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg'
								})
							}
						}
					})
				} else {
					uni.showModal({
						content: '未登录,请登录后操作',
						confirmText: '登录',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({ url: '/pages/index/login' })
							}
						}
					})
				}
			},
			goLogin() {
				uni.navigateTo({ url: '/pages/index/login' })
			},
		}
	}
</script>

<style>
	page {
		background-color: #E3D1BD;
	}
</style>
<style scoped>
	.g-h5 {
		margin: 0;
	}

	.read-content {
		width: 750rpx;
		position: relative;
		padding: 0 20rpx;
	}

	.read-title {
		padding: 42rpx 0 10rpx;
		border-bottom: 1rpx solid red;
	}

	.page-scroll-view {
		padding-top: 20rpx;
		flex: 1;
		/* height: 600px; */
		font-size: 32rpx;
		color: #000;
		line-height: 58rpx;
		overflow: hidden;
	}

	.read-page-view {
		position: fixed;
		left: 0rpx;
		z-index: 999;
		top: 100rpx;
		display: flex;
		align-items: flex-start;
	}

	.catalog-view {
		width: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #EEDFD0;
		padding-top: 12rpx;
		font-size: 24rpx;
	}

	.catalog-view-sel {
		background-color: #fff;
	}

	.catalog-info-view {
		padding: 50rpx 20rpx 20rpx 40rpx;
		background-color: #fff;
		width: 640rpx;
		height: 400rpx;
	}

	.catalog-info-view1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.catalog-text {
		width: 280rpx;
		padding: 26rpx 0;
		border-bottom: 1rpx dashed #F8F0E7;
		cursor: pointer;
	}

	.catalog-text:hover {
		color: #E4A377;
	}

	.buy-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
	}

	.buy-tips-text {
		font-size: 32rpx;
		color: #999999;
	}

	.fee-view {
		margin-top: 20rpx;
		background-color: #DB4E44;
		border-radius: 8rpx;
		display: flex;
		color: #fff;
		align-items: center;
		padding: 10rpx 0
	}

	.fee-text {
		padding: 0 30rpx;
	}

	.fee-line {
		width: 2rpx;
		height: 34rpx;
		background-color: #fff;
	}

	.buy-btn {
		padding: 0 30rpx;
	}

	.btns-view {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 9999;
		right: 0rpx;
		bottom: 0;
	}

	.chat_btn {
		width: 26rpx;
		height: 64rpx;
		background-color: #eedfd0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
		cursor: pointer;
	}

	.top-btn {
		width: 26rpx;
		height: 64rpx;
		background-color: #eedfd0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
		margin-top: 6rpx;
		cursor: pointer;
	}

	.bottom-btn {
		width: 26rpx;
		height: 64rpx;
		background-color: #eedfd0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
		margin-top: 6rpx;
		cursor: pointer;
	}

	.zhezhao {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, .2);
		z-index: 9999999999999999;
		position: fixed;
		left: 0;
		top: 0;
	}

	.ai-chat-view {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.iframe-view {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		font-size: 32rpx;
	}

	.login-view {
		display: flex;
		/* width: 400rpx; */
		justify-content: center;
		margin-top: 40rpx;
	}

	.login-view1 {
		padding: 14rpx 60rpx;
		background-color: blue;
		color: #fff;
		border-radius: 12rpx;
	}

	.question-view {
		width: 750rpx;
		height: 600rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}
</style>